*{
    margin:0px;
    padding:0px;
}
.container{
    width:320px;
    height:480px;
    background:url('../imgs/game_bg.jpg') no-repeat center 0;
    margin:50px auto;
    position: relative;
}
.container>h1{
    color:white;
    margin-left:60px;
}
.container>.progress{
    width:180px;
    height:16px;
    background:url('../imgs/progress.png') no-repeat 0 0;
    position: absolute;
    top:66px;
    left:63px;
}
.container>.start{
    width: 150px;
    line-height:35px;
    text-align:center;
    color:white;
    background:linear-gradient(#e55c3d,#c50000);
    font-size:20px;
    border-radius: 20px;
    border:none;
    bottom: 160px;
    left:85px;
    position:absolute;
    outline: none;
    cursor: pointer;
}
.container>.rules{
    width:100%;
    height:20px;
    background: #cccccc;
    position: absolute;
    left:0;
    bottom:0;
    text-align:center;
    cursor: pointer;
}
.container>.rule{
    width:100%;
    height:100%;
    background:rgba(0, 0, 0, 0.5);
    position: absolute;
    left:0;
    top:0;
    padding-top:100px;
    box-sizing: border-box;
    text-align:center;
    display:none;
}
.rule>p{
    line-height: 50px;
    color:white;
}
.rule>a{
    line-height: 50px;
    color:red;
}
.container>.mask{
    width:100%;
    height:100%;
    background:rgba(0, 0, 0, 0.5);
    position: absolute;
    left:0;
    top:0;
    padding-top:200px;
    box-sizing: border-box;
    text-align:center;
    display: none;
}
.container>.mask h1{
    color:#ff4500;
    text-shadow:3px 3px 0 #fff;
    font-size:40px;
    top:200px;
}
.container>.mask button{
    width: 150px;
    line-height:35px;
    text-align:center;
    color:white;
    background:linear-gradient(#74accf,#007ddc);
    border-radius: 20px;
    border:none;
    bottom: 160px;
    left:85px;
    position:absolute;
    outline: none;
    cursor: pointer;
}
